<template>
  <div>
    <div v-show="$route.name == 'user-list'">
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/user-list' }">用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图区域 -->
      <el-card>
        <div style="margin-bottom: 20px;">用户列表</div>
        <!-- 搜索与添加区域 -->
        <el-row class="query">
          <el-col :span="24">
            <el-select v-model="search.department_id" popper-class="dropdownbox" placeholder="请选择部门" :clearable="clearAble" :disabled="!clearAble" class="query-search">
              <el-option v-for="item in departmentList" :label="item.name"
                :value="item.id" :key="item.id">
                <span style="float: left">{{ item.name }}</span>
              </el-option>
            </el-select>
            <el-button class="query-button" @click="reset" style="margin-left: 5px;" v-if="clearAble">重置</el-button>
            <el-button type="primary" @click="searchData" class="query-button" style="margin-left: 5px;" v-if="clearAble">搜索</el-button>
          </el-col>
        </el-row>
        <el-table
          border
          :loading="loading"
          :data="userList"
          style="margin-top: 10px;">
          <el-table-column type="index" :index="indexMethod" width="50" align="center"></el-table-column>
          <el-table-column label="姓名" prop="truename" min-width="135" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="clickButton(scope.row.id)">{{scope.row.truename}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="未开始" prop="wait" min-width="50" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.wait" type="text" @click="clickButton(scope.row.id, 1)">{{scope.row.wait}}</el-button>
              <span v-else>{{ scope.row.wait }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开发中" prop="dev" min-width="50" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.dev" type="text" @click="clickButton(scope.row.id, 2)">{{scope.row.dev}}</el-button>
              <span v-else>{{ scope.row.dev }}</span>
            </template>
          </el-table-column>
          <el-table-column label="待检查" prop="check" min-width="50" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.check" type="text" @click="clickButton(scope.row.id, 3)">{{scope.row.check}}</el-button>
              <span v-else>{{ scope.row.check }}</span>
            </template>
          </el-table-column>
          <el-table-column label="暂缓" prop="state" min-width="50" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.state" type="text" @click="clickButton(scope.row.id, 4)">{{scope.row.state}}</el-button>
              <span v-else>{{ scope.row.state }}</span>
            </template>
          </el-table-column>
          <el-table-column label="已完成" prop="complete" min-width="50" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.complete" type="text" @click="clickButton(scope.row.id, 5)">{{scope.row.complete}}</el-button>
              <span v-else>{{ scope.row.complete }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务数量" prop="task_count" min-width="50" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.task_count" type="text" @click="clickButton(scope.row.id)">{{scope.row.task_count}}</el-button>
              <span v-else>{{ scope.row.task_count }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="80" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="default" @click="clickButton(scope.row.id)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pager.currPage"
          :page-sizes="[1, 3, 5, 10]"
          :page-size="pager.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.totalCount">
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      auths: [],
      departmentList: [],
      search: {
        department_id: ''
      },
      clearAble: false,
      userList: [],
      pager: {
        currPage: 1,
        pageSize: 10,
        totalPage: 1,
        totalCount: 0
      },
      isCheck: 0,
      checkUser: 0
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      this.auths = JSON.parse(localStorage.task_auths)
      this.userId = localStorage.task_user
      const { data: result } = await this.$http.get('/user/' + this.userId)
      this.departmentList = result.data.department
      if (this.auths.indexOf('change_department') !== -1) {
        this.clearAble = true
      } else {
        this.search.department_id = this.departmentList[0].id
      }
      
      // 纯检查
      if (this.auths.indexOf('task-list-checkable') !== -1) {
        this.isCheck = 1
        // 开发且检查
        if (this.auths.indexOf('task-list-user') !== -1) {
          this.checkUser = this.userId
        }
      }
      this.getUserList()
    },
    indexMethod(index) {
      index = index + 1
      if (this.pager.currPage > 1) {
        index = index + (this.pager.currPage - 1) * this.pager.pageSize
      }
      return index
    },
    addTask() {
      this.$router.push({ 'name': 'task-save' })
    },
    async getUserList() {
      this.loading = true
      const params = {
        page: this.pager.currPage,
        pageSize: this.pager.pageSize,
        department_id: this.search.department_id,
        is_check: this.isCheck,
        check_user: this.checkUser
      }
      const { data: result } = await this.$http.get('/user-task', { params: params })
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      this.loading = false
      this.pager = result.pager
      this.userList = result.data
    },
    handleSizeChange(pageSize) {
      this.pager.pageSize = pageSize
      this.getUserList()
    },
    handleCurrentChange(currentPage) {
      this.pager.currPage = currentPage
      this.getUserList()
    },
    reset() {
      this.search = {
        department_id: ''
      }
      this.pager.currPage = 1
      this.getUserList()
    },
    searchData() {
      this.pager.currPage = 1
      this.getUserList()
    },
    clickButton(id, type = 0) {
      this.$router.push({
        name: 'task-list',
        params: { 
          task_user_id: id,
          task_status: type
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.query {
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>